<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="84px"
        :rules="formRules"
      >
        <!-- 账号输入框 -->
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="formData.username"
            placeholder="请输入账号"
            clearable
          />
        </el-form-item>
        <!-- 管理员头像 -->
        <el-form-item label="头像">
          <div>
            <uploadimg v-model="formData.avatar" />
          </div>
        </el-form-item>

        <!-- 角色选择框 -->
        <el-form-item label="角色" prop="roleIds">
          <el-select
            v-model="formData.roleIds"
            class="flex-1"
            multiple
            placeholder="请选择角色"
            clearable
          >
            <!-- <el-option v-if="formData.admin == 1" label="超级管理员" :value="1" /> -->
            <el-option
              v-for="(item, index) in roleList"
              :key="index"
              :disabled="item.admin == 1"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <!-- 管理员状态 -->
        <el-form-item label="管理员状态" v-if="formData.admin != 1">
          <el-switch
            v-model="formData.status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>
<script setup>
  import { onMounted, ref } from 'vue';
  import Popup from '@/components/popup/index.vue';
  import { getAdminDetail, adminEdit, adminAdd } from '@/apis/system/admin';
  import { getRoleList } from '@/apis/system/role';
  import { arrayToTree, treeToArray } from '@/utils/util';

  const emit = defineEmits(['success', 'close']);
  const formRef = ref(null);
  const popupRef = ref(null);
  const roleList = ref('');
  const postList = ref('');
  const deptOptions = ref('');
  const mode = ref('add');
  const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑管理员' : '新增管理员';
  });
  const formData = reactive({
    id: '',
    username: '',
    roleIds: [],
    avatar: '',
    status: 1,
  });

  const formRules = reactive({
    user_name: [
      {
        required: true,
        message: '请输入账号',
        trigger: ['blur'],
      },
    ],
    nick_name: [
      {
        required: true,
        message: '请输入昵称',
        trigger: ['blur'],
      },
    ],
    roleIds: [
      {
        type: 'array',
        required: true,
        message: '请选择角色',
        trigger: ['blur'],
      },
    ],
  });

  const handleSubmit = async () => {
    await formRef.value?.validate();
    mode.value == 'edit' ? await adminEdit(formData) : await adminAdd(formData);
    popupRef.value?.close();
    emit('success');
  };

  const open = (type = 'add') => {
    mode.value = type;
    popupRef.value?.open();
    getRole();
  };

  const getRole = async () => {
    await getRoleList().then(data => {
      roleList.value = data.list;
    });
  };

  const setFormData = async row => {
    formData.avatar = row.avatar;
    const data = await getAdminDetail({
      id: row.id,
    });
    for (const key in formData) {
      if (data[key] != null && data[key] != undefined) {
        //@ts-ignore
        formData[key] = data[key];
      }
    }
  };

  const handleClose = () => {
    emit('close');
  };

  defineExpose({
    open,
    setFormData,
  });
</script>

<style scoped lang="scss">
  .avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .avatar-uploader :deep() .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader :deep() .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 20px !important;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
  }
</style>
